<!DOCTYPE html>
<html>

	<head>
		<title>Moveend Example</title>
	<script src="js/jquery.js"></script>
		<link rel="stylesheet" href="css/bootstrap.css">
		<script src="js/bootstrap.js"></script>
		<link rel="stylesheet" href="css/ol.css" type="text/css">
		<script src="js/ol-debug.js"></script>

	</head>

	<body>
		<div class="container-fluid">

			<div class="row-fluid">
				<div class="span12">
					<div id="map" class="map"></div>
				</div>
			</div>
			<label>top</label>
			<input type="text" id="top">
			<label>right</label>
			<input type="text" id="right">
			<label>bottom</label>
			<input type="text" id="bottom">
			<label>left</label>
			<input type="text" id="left">

		</div>
		<script>
			var map = new ol.Map({
				layers: [
					new ol.layer.Tile({
						source: new ol.source.OSM()
					})
				],
				target: 'map',
				controls: ol.control.defaults({
					attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
						collapsible: false
					})
				}),
				view: new ol.View({
					center: [0, 0],
					zoom: 2
				})
			});

			function display(id, value) {
				document.getElementById(id).value = value.toFixed(2);
			}

			function wrapLon(value) {
				var worlds = Math.floor((value + 180) / 360);
				return value - (worlds * 360);
			}

			function onMoveEnd(evt) {
				var map = evt.map;
				var extent = map.getView().calculateExtent(map.getSize());
				var bottomLeft = ol.proj.transform(ol.extent.getBottomLeft(extent),
					'EPSG:3857', 'EPSG:4326');
				var topRight = ol.proj.transform(ol.extent.getTopRight(extent),
					'EPSG:3857', 'EPSG:4326');
				display('left', wrapLon(bottomLeft[0]));
				display('bottom', bottomLeft[1]);
				display('right', wrapLon(topRight[0]));
				display('top', topRight[1]);
			}
			map.on('moveend', onMoveEnd);
		</script>
	</body>

</html>